<!--  -->
<template>
  <div class="userDetail the-block">
    <p class="title">用户详情</p>
    <div class="user-info">
      <div class="info-image">
        <el-image style="width: 150px;height: 150px;" fit="contain" :src="detailData.detail.faceUrl"/>
      </div>
      <div class="info-detail">

        <div class="info-item">
          <p class="label"> 品客ID</p>
          <p class="value">{{detailData.detail.customerId}}</p>
        </div>

        <div class="info-item">
          <p class="label">性别</p>
          <p class="value">
            {{getItemFromArray(userList.sex,detailData.detail.sex) || "--"}}
          </p>
        </div>

        <div class="info-item">
          <p class="label">注册时间</p>
          <p class="value">{{detailData.detail.createdAt}}</p>
        </div>

        <div class="info-item">
          <p class="label">手机号码</p>
          <p class="value">{{detailData.detail.phone}}</p>
        </div>

        <div class="info-item">
          <p class="label">所在省市</p>
          <p class="value">
            
            <span v-if="detailData.detail.provinceName">{{detailData.detail.provinceName}}</span>
            <span v-else class="isEmpty">--</span>
            <span> / </span>
            <span v-if="detailData.detail.cityName">{{detailData.detail.cityName}}</span>
            <span v-else class="isEmpty">--</span>
          </p>
        </div>

        <div class="info-item">
          <p class="label">最近登录时间</p>
          <p class="value">{{detailData.detail.lastLogin}}</p>
        </div>

        <div class="info-item">
          <p class="label">用户昵称</p>
          <p class="value">{{detailData.detail.nickname}}</p>
        </div>

        <!-- <div class="info-item">
          <p class="label">帐号类型</p>
          <p class="value value-flex">
            <span>{{getItemFromArray(userList.identification,detailData.detail.identification) || "--"}}</span>
            <el-button type="primary" :icon="Edit" plain size="small" circle @click="operateFn.openPanel(detailData.detail,'identification')"/>
          </p>
        </div> -->

        <div class="info-item">
          <p class="label">帐号状态</p>
          <p class="value value-flex">
            <span :style="{color:['#D9001B','#70B603'][detailData.detail.status]}">{{getItemFromArray(userList.status,detailData.detail.status) || "--"}}</span>
            <el-button type="primary" :icon="Edit" plain size="small" circle @click="operateFn.openPanel(detailData.detail,'status')"/>
          </p>
        </div>

        <div class="info-item all-line">
          <p class="label">简介</p>
          <p class="value">{{detailData.detail.briefIntro}}</p>
        </div>

        <div class="info-item all-line">
          <p class="label">偏好</p>
          <p class="value">{{detailData.detail.preference}}</p>
        </div>
      </div>
    </div>
  </div>
  
    <el-dialog v-model="operateData.showPanel" width="50%">
      <template #title>
        <div style="text-align:left;">修改账号{{operateData.type==='identification'?'类型':'状态'}}</div>
      </template>
      <div class="detail-body">
        <el-form :model="operateData.post" class="demo-form-inline" label-width="120px">
          <template v-if="operateData.type==='identification'">
            <el-form-item label="账号类型">
              <el-select v-model="operateData.post.identification" placeholder="账号类型">
                <el-option v-for="(item,index) in userList.identification" :key="index" :label="item.name" :value="item.key" />
              </el-select>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="账号状态">
              <el-select v-model="operateData.post.status" placeholder="账号状态">
                <el-option v-for="(item,index) in userList.status" :key="index" :label="item.name" :value="item.key" />
              </el-select>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain type="primary" @click="operateFn.submitData">确定</el-button>
          <el-button plain @click="operateFn.closePanel">取消</el-button>
        </span>
      </template>
    </el-dialog>

</template>

<script setup>
import { ref,reactive, watchEffect} from "vue";
import { getCustomerDetail,updateCustomerAccount } from "@/api/videouser.js";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { userList,getItemFromArray }  from "@/utils/tool.js";
import { Edit } from '@element-plus/icons-vue'
import imageViewer from "@/components/imageViewer/index2";

const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})

// 详情
const { $data: detailData, $fn: detailFn,backup:detailBackup} = (() => {
  const backup = {
    identification:"",//	修改用户身份时填写	
    status:"",//	修改账号状态时填写
  }
  const $data = reactive({
    detail: {},
  });
  const $fn = {
    getDetails() {
      getCustomerDetail(params.value.id).then((res) => {
        if (res.code === 0) {
          $data.detail = { ...res.data,...res.data.picoOpusKindOfNum };
          backup.identification = res.data.identification||'';
          backup.status = res.data.status||'';
        }
      });
    },
    openImageViewer(list,index){  
      imageViewer({initialIndex: index,urlList: list});
    }
  };
  return {
    $data,
    $fn,
    backup
  };
})();

// 修改类型和状态
const { $data: operateData, $fn: operateFn} = (() => {
  const $data = reactive({
    showPanel: false,
    post:{
      customerId:"",//	
      identification:"",//	修改用户身份时填写	
      status:"",//	修改账号状态时填写
    },
    type: "",
  });
  const $fn = {
    openPanel(row,type){
      $data.type = type;
      $data.post[type] = row[type];
      $data.post.customerId = row.customerId;
      $data.showPanel = true;
    },
    closePanel(){
      $data.showPanel = false;
      $data.type = "";
    },
    submitData(){
      let req={
        customerId: $data.post.customerId,
      };
      if($data.type === "identification"){
        if(detailBackup.identification === $data.post.identification){
          ElMessage.warning("账号类型已存在！");
          $fn.closePanel();
          return;
        }
        req.identification = $data.post.identification;
      }else{
        if(detailBackup.status === $data.post.status){
          ElMessage.warning("账号状态已存在！");
          $fn.closePanel();
          return;
        }
        req.status = $data.post.status;
      }
      updateCustomerAccount(req).then(res=>{
        if(res.code===0){
          detailFn.getDetails();
          $fn.closePanel();
          ElMessage.success("修改成功！");
        }
      })
    }
  };
  return {
    $data,
    $fn,
  };
})();



function init(){
  detailFn.getDetails();
}
init();

// 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
onBeforeRouteUpdate((to, from, next) => {
  if(to.params.id !== from.params.id && to.query.view === from.query.view){
    params.value.id = to.params.id;
    query.value = to.query;
    init();
  }
  next();
});
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
$border-color: #f5f7fa;

@mixin item(){
  > p {
    display: inline-block;
    line-height: 28px;
    padding: 8px;
    box-sizing: border-box;
    min-height: 32px;
    outline: 1px solid #dddddd;
    width: 100%;
  }
  .value-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.the-block {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  .title {
    padding: 8px;
  }
}

.userDetail {
  padding: 8px;
  .user-info {
    margin-top: 8px;
    $headImgWidth: 160px;
    .info-image {
      display: inline-block;
      vertical-align: top;
      width: $headImgWidth;
      font-size: 0;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
    .info-detail {
      width: calc(100% - $headImgWidth);
      display: inline-flex;
      flex-wrap: wrap;
      font-size: 0;
      box-sizing: border-box;
      .info-item {
        position: relative;
        display: inline-flex;
        // padding: 6px;
        width: 33.33%;
        min-width: 320px;
        font-size: 14px;
        box-sizing: border-box;
        @include item();
        .label {
          background-color: #f0f2f5;
          width: 160px;
        }
        .value {
          background-color: #ffffff;
          width: calc(100% - 160px);
        }
      }
      .all-line {
        width: 100%;
      }
    }
  }
}

.countDetail {
  padding: 8px;
  .count-info {
    margin-top: 12px;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0;
    box-sizing: border-box;
    .info-item {
      position: relative;
      display: inline-block;
      // padding: 6px;
      width: 16.66%;
      min-width: 200px;
      font-size: 14px;
      box-sizing: border-box;
      @include item();
      .label {
        background-color: #f0f2f5;
      }
      .value {
        background-color: #ffffff;
      }
    }
    .all-line {
      width: 100%;
    }
  }
}
</style>